<!-- <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>智能口罩</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    /* 添加字体和背景颜色 */
    body {
      font-size: 16px;
      font-family: 'Helvetica Neue', sans-serif;
      color: #fff;
      margin: 0;
      padding: 0;
      background-color: #f5f5f5;
    }

    /* 改变标题字体和大小 */
    h1 {
      text-align: center;
      font-family: Arial, sans-serif;
      font-size: 48px;
      margin-top: 40px;
    }

    /* 设置导航菜单样式 */
    .navbar {
      display: flex;
      justify-content: space-between;    
      align-items: center;
      height: 64px;
      padding: 0 16px;
      background-color: #fff;
      border-bottom: 1px solid #ddd;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    /* 设置导航菜单链接样式 */
    .navbar a {
      text-decoration: none;
      color: #333;
      font-weight: bold;
      font-size: 18px;
      padding: 12px 16px;
    }

    /* 修改主要内容区域样式 */
    .container {
      max-width: 900px;
      margin: 24px auto;
      padding: 24px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      background-color: #fff;
    }

    /* 修改温湿度显示样式 */
    .info-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 24px;
      padding: 24px;
      border-radius: 4px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.1);
      background-color: #fff;
    }

    .info-box span {
      font-size: 32px;
      font-weight: bold;
    }

    .info-box p {
      font-size: 18px;
      margin: 0;
    }

    /* 调整连接蓝牙按钮样式 */
    #connectBtn {
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 4px;
      padding: 12px 24px;
      margin-bottom: 24px;
      cursor: pointer;
      font-size: 18px;
      font-weight: bold;
      transition: background-color 0.2s ease-out;
    }

    #connectBtn:focus,
    #connectBtn:hover {
      background-color: #0056b3;
    }

    /* 改变图表样式 */
    canvas {
      width: 100%;
      margin-top: 24px;
      border-radius: 4px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.1);
      background-color: #fff;
    }

    /* 添加 @media 查询以实现响应式设计 */
    @media (max-width: 768px) {
      .container {
        padding: 16px;
      }
      h1 {
        font-size: 36px;  
      }
      .info-box {
        flex-direction: column;
        justify-content: center;
        text-align: center;
      }
      #connectBtn {
        margin-top: 12px;
        margin-bottom: 12px;
      }
    }
  </style>
</head>

<body>
  <div class="navbar">
    <h2>智能口罩</h2>
    <a href="#">退出登录</a>
  </div>

  <div class="container">
    <div class="info-box">
      <div>
        <p>当前温度:</p>
        <span id="temperature">--</span><span>℃</span>
      </div>
      <div>
        <p>当前湿度:</p>
        <span id="humidity">--</span><span>%</span>
      </div>
    </div>

    <button id="connectBtn">连接蓝牙</button>

    <canvas id="myChart"></canvas>
  </div>

  <script>
    const connectBtn = document.getElementById('connectBtn');
    const temperatureEl = document.getElementById('temperature');
    const humidityEl = document.getElementById('humidity');
    const ctx = document.getElementById('myChart').getContext('2d');

    let chart;

    function updateTemperatureAndHumidity() {
      const temperature = Math.floor(Math.random() * 10) + 20; // 模拟温度
      const humidity = Math.floor(Math.random() * 30) + 50; // 模拟湿度
      temperatureEl.textContent = temperature;
      humidityEl.textContent = humidity;

      // 更新图表数据
      chart.data.labels.push(new Date().toLocaleTimeString());
      chart.data.datasets[0].data.push(temperature);
      chart.data.datasets[1].data.push(humidity);
      chart.update();
    }

    setInterval(updateTemperatureAndHumidity, 1000); // 定时更新温度湿度

    // 初始化图表
    chart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: [],
        datasets: [{
          data: [],
          label: '温度 (℃)',
          borderColor: '#007bff',
          fill: false
        }, {
          data: [],
          label: '湿度 (%)',
          borderColor: '#28a745',
          fill: false
        }]
      },
      options: {
        responsive: true,
        title: {
          display: true,
          text: '实时温度湿度图表'
        },
        scales: {
          xAxes: [{
            type: 'time',
            display: true,
            scaleLabel: {
              display: true,
              labelString: '时间'
            }
          }],
          yAxes: [{
            display: true,
            scaleLabel: {
              display: true,
              labelString: '数值'
            }
          }]
        }
      }
    });
 -->
 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8">
   <title>智能口罩</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   <style>
     /* 添加字体和背景颜色 */
     body {
       font-size: 16px;
       font-family: 'Helvetica Neue', sans-serif;
       color: #fff;
       margin: 0;
       padding: 0;
       background-color: #f5f5f5;
     }
 
     /* 改变标题字体和大小 */
     h1 {
       text-align: center;
       font-family: Arial, sans-serif;
       font-size: 48px;
       margin-top: 40px;
     }
 
     /* 设置导航菜单样式 */
     .navbar {
       display: flex;
       justify-content: space-between;    
       align-items: center;
       height: 64px;
       padding: 0 16px;
       background-color: #fff;
       border-bottom: 1px solid #ddd;
       box-shadow: 0 2px 4px rgba(0,0,0,0.2);
     }
 
     /* 设置导航菜单链接样式 */
     .navbar a {
       text-decoration: none;
       color: #333;
       font-weight: bold;
       font-size: 18px;
       padding: 12px 16px;
     }
 
     /* 修改主要内容区域样式 */
     .container {
       max-width: 900px;
       margin: 24px auto;
       padding: 24px;
       border-radius: 8px;
       box-shadow: 0 2px 4px rgba(0,0,0,0.2);
       background-color: #fff;
     }
 
     /* 修改温湿度显示样式 */
     .info-box {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-top: 24px;
       padding: 24px;
       border-radius: 4px;
       box-shadow: 0 1px 2px rgba(0,0,0,0.1);
       background-color: #fff;
     }
 
     .info-box span {
       font-size: 32px;
       font-weight: bold;
     }
 
     .info-box p {
       font-size: 18px;
       margin: 0;
     }
 
     /* 调整连接蓝牙按钮样式 */
     #connectBtn {
       background-color: #007bff;
       color: #fff;
       border: none;
       border-radius: 4px;
       padding: 12px 24px;
       margin-bottom: 24px;
       cursor: pointer;
       font-size: 18px;
       font-weight: bold;
       transition: background-color 0.2s ease-out;
     }
 
     #connectBtn:focus,
     #connectBtn:hover {
       background-color: #0056b3;
     }
 
     /* 改变图表样式 */
     canvas {
       width: 100%;
       margin-top: 24px;
       border-radius: 4px;
       box-shadow: 0 1px 2px rgba(0,0,0,0.1);
       background-color: #fff;
     }
 
     /* 添加 @media 查询以实现响应式设计 */
     @media (max-width: 768px) {
       .container {
         padding: 16px;
       }
       h1 {
         font-size: 36px;  
       }
       .info-box {
         flex-direction: column;
         justify-content: center;
         text-align: center;
       }
       #connectBtn {
         margin-top: 12px;
         margin-bottom: 12px;
       }
     }
   </style>
 </head>
 
 <body>
   <div class="navbar">
     <h2>智能口罩</h2>
     <a href="#">退出登录</a>
   </div>
 
   <div class="container">
     <div class="info-box">
       <div>
         <p>当前温度:</p>
         <span id="temperature">--</span><span>℃</span>
       </div>
       <div>
         <p>当前湿度:</p>
         <span id="humidity">--</span><span>%</span>
       </div>
     </div>
 
     <button id="connectBtn">连接蓝牙</button>
 
     <canvas id="myChart"></canvas>
   </div>
   
 
   <script>
     const connectBtn = document.getElementById('connectBtn');
     const temperatureEl = document.getElementById('temperature');
     const humidityEl = document.getElementById('humidity');
     const ctx = document.getElementById('myChart').getContext('2d');
 
     let chart;
 
     function updateTemperatureAndHumidity() {
       const temperature = Math.floor(Math.random() * 10) + 20; // 模拟温度
       const humidity = Math.floor(Math.random() * 30) + 50; // 模拟湿度
       temperatureEl.textContent = temperature;
       humidityEl.textContent = humidity;
 
       // 更新图表数据
       chart.data.labels.push(new Date().toLocaleTimeString());
       chart.data.datasets[0].data.push(temperature);
       chart.data.datasets[1].data.push(humidity);
       chart.update();
     }
 
     setInterval(updateTemperatureAndHumidity, 1000); // 定时更新温度湿度
 
     // 初始化图表
     chart = new Chart(ctx, {
       type: 'line',
       data: {
         labels: [
           '11:20:35',
           '11:21:35',
           '11:22:35',
           '11:23:35',
           '11:24:35',
           '11:25:35',
           '11:26:35',
           '11:27:35',
           '11:28:35',
           '11:29:35',
           '11:30:35',
           '11:31:35',
           '11:32:35',
           '11:33:35',
           '11:34:35',
           '11:35:35',
           '11:36:35',
           '11:37:35',
           '11:38:35',
           '11:39:35',
         ],
         datasets: [{
           data: [
             23,
             25,
             26,
             22,
             21,
             24,
             27,
             28,
             26,
             25,
             23,
             24,
             23,
             23,
             22,
             23,
             24,
             23,
             25,
             26,
           ],
           label: '温度 (℃)',
           borderColor: '#007bff',
           fill: false
         }, {
           data: [
             60,
             58,
             55,
             53,
             52,
             55,
             58,
             59,
             57,
             56,
             55,
             55,
             56,
             56,
             54,
             55,
             57,
             56,
             58,
             59,
           ],
           label: '湿度 (%)',
           borderColor: '#28a745',
           fill: false
         }]
       },
       options: {
         responsive: true,
         title: {
           display: true,
           text: '实时温度湿度图表'
         },
         scales: {
           xAxes: [{
             type: 'time',
             display: true,
             scaleLabel: {
               display: true,
               labelString: '时间'
             }
           }],
           yAxes: [{
             display: true,
             scaleLabel: {
               display: true,
               labelString: '数值'
             }
           }]
         }
       }
     });
 
   </script>
 </body>
 </html>
 